<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../fontawesome-5.15.4/css/all.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <!--<script src="../fontawesome-5.15.4/js/all.js"></script>-->

    <!--网站图标-->
    <link rel="icon" href="../favicon.ico"/>
</head>
<body>
<div class="header-wrapper">
    <div class="header w clearfix">
        <ul class="service">
            <li>
                <a href="javascript:;">小米商城
                </a>
            </li>
            <li class="line">|</li>
            <li><a href="javascript:;">MIUI</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">lot</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">云服务</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">金融</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">有品</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">小爱开放平台</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">企业团购</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">资质证照</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">协议规则</a></li>
            <li class="line">|</li>
            <li>
                <a class="app" href="javascript:;">下载app
                    <div class="qrcode">
                        <img src="../img/1.jpg" alt="">
                        <span>小米商城APP</span>
                    </div>
                </a>
            </li>
            <li class="line">|</li>
            <li><a href="javascript:;">SelectLocation</a></li>
        </ul>

        <ul class="shop-cart">
            <li>
                <a class="cart" href="javascript:;">
                    <i class="fas fa-shopping-cart"></i>
                    购物车(0)
                    <div class="cart-detail">
                        <span>购物车中还没有商品。赶快选购吧！</span>
                    </div>
                </a>
            </li>
        </ul>

        <ul class="user-info">
            <li><a href="javascript:;">登录</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">注册</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">消息通知</a></li>
            <!--<li class="line">|</li>-->
        </ul>
    </div>
</div>
<div class="top-wrapper">
    <div class="top w">
        <h1 class="logo">
            米家
            <a class="home" href="/"></a>
            <a class="mi" href="/"></a>
        </h1>

        <div class="nav-wrapper ">
            <ul class="nav clearfix">
                <li class="all-goods-wrapper">
                    <a class="all-goods" href="#">全部商品分类</a>


                    <!--左侧导航菜单-->
                    <ul class="left-menu">
                        <li>
                            <a href="#">手机 电话卡
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">电视 盒子
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">笔记本 平板
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">家电 插线板
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">出行 穿戴
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">智能 路由器
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">电源 配置
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">健康 儿童
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">耳机 音箱
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">生活 箱包
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="show-goods"><a href="#">小米手机</a></li>
                <li class="show-goods"><a href="#">Redmi红米</a></li>
                <li class="show-goods"><a href="#">电视</a></li>
                <li class="show-goods"><a href="#">笔记本</a></li>
                <li class="show-goods"><a href="#">家电</a></li>
                <li class="show-goods"><a href="#">路由器</a></li>
                <li class="show-goods"><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>

                <!--弹出层-->
                <div class="goods-info">

                </div>
            </ul>
        </div>

        <!--搜索框-->
        <div class="search-wrapper">
            <form action="#" class="search">
                <input type="text" class="search-inp"/>
                <button class="search-btn">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
    </div>
</div>
<!--创建banner-->
<div class="banner-wrapper">
    <div class="banner w">
        <ul class="img-list">
            <li>
                <a href="#">
                    <img src="./img/banner3.jpg" alt=""></img>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/banner2.jpg" alt=""></img>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/banner1.jpg" alt=""></img>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/banner3.jpg" alt=""></img>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/banner2.jpg" alt=""></img>
                </a>
            </li>
        </ul>

        <div class="pointer">
            <a class="active" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>

        <div class="prev-next">
            <a class="prev" href="javascript:;"></a>
            <a class="next" href="javascript:;"></a>
        </div>
    </div>
</div>
<!--固定定位跳转顶部-->
<div class="to-top">
</div>
<!--广告位-->
<div class="ad w">
    <ul class="shortcut">
        <li><a href="#">
            <i class="fas fa-clock"></i>
            小米秒杀</a></li>
        <li><a href="#">
            <i class="fas fa-building"></i>
            企业团购</a></li>
        <li><a href="#">
            <i class="fas fa-frog"></i>
            F码通道</a></li>
        <li><a href="#">
            <i class="fas fa-id-card"></i>
            米粉卡</a></li>
        <li><a href="#">
            <i class="fas fa-newspaper"></i>
            以旧换新</a></li>
        <li><a href="#">
            <i class="fas fa-sim-card"></i>
            话费充值</a></li>
    </ul>

    <ul class="imgs">
        <li>
            <a href="#">
                <img src="./img/1.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="./img/2.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="./img/3.jpg" alt="">
            </a>
        </li>
    </ul>
</div>
</body>
</html>
